<!-- 
  @description 操作历史-审批历史
  @author cjs
  @date 2021-04-30 10:48:40
-->
<template>
	<div class="approve_history_wrap">
		<!-- 展示操作历史 -->
		<el-timeline>
			<template v-for="(item, index) in approve_history_list">
				<el-timeline-item :key="index"
				  :timestamp="item.endTime"
				  placement="top">
					<template v-if="item.status !== 99">
						<el-card>
							<p class="item_p_wrap">
								<span class="item_desc">审批结果:</span>
								<span>{{item.status === 1 ? '通过' : '不通过'}}</span>
							</p>
							<p class="item_p_wrap">
								<span class="item_desc">审批人: </span>
								<span>{{item.assigneeName || '-'}}</span>
							</p>
							<p class="item_p_wrap">
								<span class="item_desc">审批意见:</span>
								<span class="">{{item.comment || '-'}}</span>
							</p>
						</el-card>
					</template>
					<template v-else>
						<el-card>
							<p class="item_p_wrap">
								<span class="item_desc">操作状态:</span>
								<span>提交</span>
							</p>
							<p class="item_p_wrap">
								<span class="item_desc">操作人: </span>
								<span>{{item.assigneeName || '-'}}</span>
							</p>
						</el-card>
					</template>
				</el-timeline-item>
			</template>
		</el-timeline>
    <div style="text-align: center;">
      <el-button
        @click="closeFunc"
      >关闭</el-button>
    </div>
	</div>
</template>
<script>
import { getAuditList } from "@/api/online/my-task.js";
export default {
  props: {
    instanceId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 审批历史
      approve_history_list: [],
    };
  },
  watch: {
    instanceId() {
      this.getAuditList();
    }
  },
  mounted() {
    this.getAuditList();
  },
  methods: {
    /**
     * @name closeFunc
     * @description 关闭当前弹出层
     * @param {}
     * @author cjs
     * @date 2021-04-30 10:59:25
     */
    closeFunc() {
      this.$emit("update:dialog", false);
    },
    /**
     * @name getAuditList
     * @description 获取审批历史
     * @author cjs1992
     * @date 2020-05-27 14:03:40
     */
    async getAuditList() {
      const { instanceId } = this;
      if (!instanceId) {
        this.$message({
          type: "warning",
          message: "实例id不存在，请检查数据"
        });
        return;
      }
      const res = await getAuditList({
        instanceId
      });
      this.approve_history_list = res.result || [];
    }
  }
};
</script>
<style lang="scss" scoped>
.page_box {
  text-align: center;
  padding: 20px 0;
}
.item_p_wrap {
  line-height: 24px;
  padding: 4px 0;
  span {
    color: #888;
  }
  .item_desc {
    display: inline-block;
    width: 80px;
    color: #999;
  }
}
.borderTop{
  border-top: 1px solid #DCDFE6;
  padding-top: 15px;
  margin-top: 15px
}
</style>